<html>
<head>
<script src="js/highcharts.js"></script>

<script type="text/javascript">
	var aJaxURL	= "server-side/report/category_statistics.action.php";		//server side folder url
	var seoyURL = "server-side/seoy/seoy.action.php";					//server side folder url



	$(document).ready(function() {
		GetDate("search_start");
		GetDate("search_end");
	
		$("#search_start").val(GetDateTime(2));
		$("#search_end").val(GetDateTime(2));
	
	
		var start	= $("#search_start").val();
		var end		= $("#search_end").val();

		SeoY("category_name", seoyURL, "category_statistics", "", 0);
		
		getData(start, end, category_name);
	});
	
	$(document).on("change", "#search_start", function () {
		var start	= $(this).val();
		var end		= $("#search_end").val();
		var category_name = $("#category_name").val();
		
		getData(start, end, category_name);

	});
	
	$(document).on("change", "#search_end", function () {
		var start	= $("#search_start").val();
		var end		= $(this).val();
		var category_name = $("#category_name").val();
		
		getData(start, end, category_name);
	});

	//--SeoY
    $(document).on("click", ".combobox", function (event) {
    	var i = $(this).text();
		$("#" + i).autocomplete( "search", "" );
	});
	
	function getData(start, end, category_name){
        var options = {
                chart: {
                    renderTo: 'chart_container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'გაყიდვები კატეგორიების მიხედვით'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: []
                }]
            }
            
            $.getJSON("server-side/report/category_statistics.action.php?start=" + start + "&end=" + end + "&category_name=" + category_name, function(json) {
                options.series[0].data = json;
                chart = new Highcharts.Chart(options);
            });
	}

	$(document).on("keypress", "#category_name", function(e) {

		if(e.which == 13){		
			var category_name = this.value;
			var start	  = $("#search_start").val();
			var end		  = $("#search_end").val();

			getData(start, end, category_name);
		}
	});

	</script>
	</head>
	<body>

      <div id="dt_example" class="ex_highlight_row">
       	 <div id="container" style="width:90%">
            <div id="dynamic">

            
             <div id="button_area" style="margin: 3% 0 0 0">
             <div class="seoy-row" id="category_name_seoy" style="width: 195px;">
					<input type="text" id="category_name" class="inpt"  placeholder="პროდუქტის სახელი" />
					<button id="category_name_btn" class="combobox" style=" height: 25px; margin-top: 2px;">category_name</button>
			</div>
			</div>
	       <div id="button_area" style="margin: 3% 0 0 0">
	         <div class="left" style="width: 175px;">
	           <input type="text" name="search_start" id="search_start" class="inpt right"/>
	             </div>
	            	<label for="search_start" class="left" style="margin:5px 0 0 3px">-დან</label>
	             <div class="left" style="width: 185px;">
		            <input type="text" name="search_end" id="search_end" class="inpt right" />
	             </div>
	            	<label for="search_end" class="left" style="margin:5px 0 0 3px">–მდე</label>
	       <br /><br /><br />
	            </div>
			<div id="chart_container" style="min-width: 100%; height: 400px; margin-top:-30px;"></div>
</div>
</div>
</div>
	</body>
	</html>
